<template>
	<view class="cart-title" v-if='cart.length !== 0'>
    <!-- 顶部收货地址组件 -->
    <my-shopping></my-shopping>
     <!-- 左侧图标 -->
      <div class="box">
         <uni-swipe-action>
               <uni-swipe-action-item :options="options">
               <uni-icons class="icons" type='shop' size='18'></uni-icons>
            <!-- 右侧文本 -->
               <text class="cart-title-text" @click='btn'> 购物车1</text>
              </uni-swipe-action-item>
             </uni-swipe-action>
      </div>
           
     <!-- 循环渲染每一项商品信息 -->
   <uni-swipe-action>
       <block v-for="(item,index) in cart" :key="index">
         <uni-swipe-action-item :right-options="options"  @click='swipebtn(item)'>
             <my-goods :goods="item" :flag='true' @vidio-change='radioChange' @numfun='numfun'></my-goods>
         </uni-swipe-action-item>
        </block>
   </uni-swipe-action>
      <!-- 结算区域 -->
      <my-settle></my-settle>
	</view>
  <view class='empty-cart' v-else>
    <image src="../../static/jujingyi.jpg" ></image>
    <view> 空空如也~</view>
  </view>
</template>

<script>
  import  huibiao from '@/mixins/tabbar-badge.js'
  import { mapState,mapMutations} from 'vuex'
	export default {
  mixins:[huibiao],
  computed:{
    ...mapState('m_cart',['cart']),
 
  },
    data() {
			return {
				cateList:[],
        options:[
         {text:'删除',
         style:{
           backgroundColor:'#dd524d',
           }
         }
       ]
			}
		},
    methods : {
         ...mapMutations('m_cart',['updateGoodsState','mChangenum','removeSwipe']),
     radioChange(e){
        console.log(e,2222222)
      this.updateGoodsState(e)
     },
     btn(){
       console.log(this.cart,911)
     },
     //接收表单值变化
     numfun(e){
       console.log(1112)
        this.mChangenum(e)
     },
     //测试按钮
     swipebtn(goods){
      this.removeSwipe(goods)
            
         },
        
       
    }
  
  }
</script>

<style lang="less">
  .cart-title{
      padding-bottom:50px;
  }
.box{
  height: 40px;
  border-bottom: 1px solid #ccc;
    line-height: 40px;
    .icons{
      padding: 0 5px;
    }
}
uni-swipe-action{

  uni-swipe-action-item{
    my-goods {
      width:100%;
    }
  }
}
my-settle{
  width:100%;
  position:fixed;
  bottom:0;
  left:0;
}
.empty-cart{
 
  image{
    width:375px;
    height:485px;
    border-radius:50%;
  }
  view{
    text-align: center;
  }
  
}
</style>
